<template>
  <div>
    <scroller :show-scrollbar="false">
      <vm-cell label="类型"
               :title="record.typeStr"
               title-align="left"></vm-cell>

      <vm-cell label="金额"
               :title="record.account_funds"
               title-align="left"></vm-cell>

      <vm-cell label="日期"
               :title="record.dateStr"
               title-align="left"></vm-cell>

      <vm-cell label="备注"
               :title="record.remarkStr"
               title-align="left"></vm-cell>

    </scroller>
    <div class="edit-panel"
         v-if="record.editEnable">
      <text class="edit-btn"
            @click="handleEdit">编辑</text>
      <div class="edit-divider"></div>
      <text class="edit-btn"
            @click="handleDelete">删除</text>
    </div>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'
import { convert } from './convert'
import { STORAGE_USER } from '../../plugins/constant'

export default {
  components: { VmCell },
  props: {},
  data() {
    return {
      user: {},
      record: {}
    }
  },
  computed: {},
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (!params) { return }
      if (params.type === 1) {
        this.$router.setBackParams({ type: 1 })
        this.getData()
      }
    }
  },
  created() {
    this.getParams()
  },
  mounted() { },
  methods: {
    getParams() {
      this.user = this.$storage.getSync(STORAGE_USER) || {}
      this.$router.getParams().then(res => {
        this.record = res && res.record || {}
        this.setNavigationInfo()
      })
    },
    handleEdit() {
      this.$nav.open({
        name: 'account.record.edit',
        type: 2,
        params: {
          record: this.record
        }
      })
    },
    handleDelete() {
      this.$dialog.show({
        title: '确认删除',
        content: `删除后数据不可恢复！`,
        positiveText: '删除',
        negativeText: '取消',
        onPositive: () => {
          this.$api.deleteData({
            server: 'agr_chain',
            table: 'account_record_detail',
            id: this.record.id,
            errorMsg: '删除失败'
          }).then(res => {
            this.$notice.toast({ message: '删除成功' })
            this.$router.setBackParams({ type: 1 })
            this.$router.back()
          })
        }
      })
    },
    getData() {
      this.$api.getDataById({
        server: 'agr_chain',
        table: 'account_record_detail',
        id: this.record.id,
        errorMsg: '获取记账失败'
      }).then(res => {
        this.record = convert(res || {})
        this.record.editEnable = this.record.submit_person === this.user.userId
        this.setNavigationInfo()
      })
    },
    setNavigationInfo() {
      this.$navigator.setNavigationInfo({
        title: this.record.project_detail_des,
        navShow: true,
        statusBarStyle: 'LightContent'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.edit-panel {
  position: absolute;
  width: 750px;
  left: 0;
  bottom: 0;
  flex-direction: row;
  background-color: #fff;
  align-items: center;
  border-top-color: $border-color;
  border-top-width: 1px;
  border-top-style: solid;
}
.edit-btn {
  padding: 30px;
  text-align: center;
  flex: 1;
}
.edit-btn:active {
  background-color: #eee;
}
.edit-divider {
  height: 50px;
  width: 1px;
  background-color: $border-color;
}
</style>
